import React, { useState, useEffect } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import {
  Form,
  Input,
  Button,
  Select,
  DatePicker,
  Switch,
  message,
  Upload,
} from 'antd';

import { LoadingOutlined } from '@ant-design/icons';
import type { UploadChangeParam } from 'antd/es/upload';
import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
import { useDispatch, connect, history } from 'umi';
import '@wangeditor/editor/dist/css/style.css';
import { Editor, Toolbar } from '@wangeditor/editor-for-react';
import { IDomEditor } from '@wangeditor/editor';

function addHouse() {
  const { RangePicker } = DatePicker;
  const [editor, setEditor] = useState<IDomEditor | null>(null); // TS 语法
  // 编辑器内容
  const [html, setHtml] = useState('<p>hello</p>');
  // 及时销毁 editor ，重要！
  const dispatch = useDispatch();
  const [loading, setLoading] = useState(false);
  const [imageUrl, setImageUrl] = useState<string>();
  useEffect(() => {
    return () => {
      if (editor == null) return;
      editor.destroy();
      setEditor(null);
    };
  }, [editor]);
  const onFinish = (values: any) => {
    console.log(values);
    dispatch({
      type: 'kefu/ADDHOUSES',
      payload: values,
    });
    message.success('添加成功');
    history.push('/home/loupan/houseList');
  };
  const getBase64 = (img: RcFile, callback: (url: string) => void) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result as string));
    reader.readAsDataURL(img);
  };

  const beforeUpload = (file: RcFile) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      message.error('You can only upload JPG/PNG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('Image must smaller than 2MB!');
    }
    return isJpgOrPng && isLt2M;
  };
  const handleChange: UploadProps['onChange'] = (
    info: UploadChangeParam<UploadFile>,
  ) => {
    if (info.file.status === 'uploading') {
      setLoading(true);
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj as RcFile, (url) => {
        setLoading(false);
        setImageUrl(url);
      });
    }
  };
  const uploadButton = (
    <div>
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div style={{ marginTop: 8 }}>上传</div>
    </div>
  );
  return (
    <div>
      <Form
        onFinish={onFinish}
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 14 }}
        layout="horizontal"
        style={{ maxWidth: 1600 }}
      >
        <div
          style={{
            display: 'flex',
            marginLeft: '50px',
            width: '1000px',
            height: '50px',
          }}
        >
          <Form.Item
            label="*楼盘名称"
            name="title"
            style={{ width: '400px', marginLeft: '5px' }}
          >
            <Input style={{ width: '300px' }} />
          </Form.Item>
          <Form.Item label="*均价" name="price">
            <Input
              style={{
                width: '140px',
                paddingLeft: '20px',
                marginLeft: '25px',
              }}
              placeholder="30000"
            />
          </Form.Item>
          <Form.Item label="" name="price">
            <Select
              style={{ width: '80px', marginRight: '20px' }}
              value="元/m²"
            >
              <Select.Option value="元/m²">元/m²</Select.Option>
            </Select>
          </Form.Item>
        </div>
        <div
          style={{
            display: 'flex',
            marginLeft: '50px',
            width: '1000px',
            height: '50px',
          }}
        >
          <Form.Item
            label="*楼盘地址:"
            name="address"
            style={{ width: '400px', marginLeft: '5px' }}
          >
            <Input
              style={{
                width: '300px',
              }}
              placeholder="例:海秀路104号"
            />
          </Form.Item>
          <Form.Item
            label="*售楼处地址:"
            name="address"
            style={{ width: '500px', marginLeft: '-25px' }}
          >
            <Input
              style={{
                width: '300px',
              }}
              placeholder="例:海秀路104号"
            />
          </Form.Item>
        </div>

        <div
          style={{
            display: 'flex',
            marginLeft: '50px',
            width: '1000px',
            height: '50px',
          }}
        >
          <Form.Item
            label="开盘时间"
            name="opening_time"
            style={{ width: '400px', marginLeft: '5px' }}
          >
            <DatePicker placeholder="2016-10-22" />
          </Form.Item>
          <Form.Item label="" style={{ width: '140px', marginLeft: '-180px' }}>
            <Input placeholder="1#,2#已开盘" style={{ width: '140px' }} />
          </Form.Item>
          <Form.Item
            label="交房时间"
            name="update_time"
            style={{ width: '400px', marginLeft: '30px' }}
          >
            <DatePicker placeholder="2018-10-20" />
          </Form.Item>
          <Form.Item label="" style={{ width: '140px', marginLeft: '-180px' }}>
            <Input placeholder="1#,2#已交房" style={{ width: '140px' }} />
          </Form.Item>
        </div>
        <div
          style={{
            display: 'flex',
            marginLeft: '50px',
            width: '1000px',
            height: '50px',
          }}
        >
          <Form.Item
            label="售楼电话"
            style={{ width: '420px' }}
            name="sale_phone"
          >
            <Input placeholder="0898-32266803" style={{ width: '200px' }} />
          </Form.Item>
          <Form.Item
            label="转"
            style={{ width: '100px', marginLeft: '-140px' }}
          >
            <Input placeholder="8888" style={{ width: '70px' }} />
          </Form.Item>
          <Form.Item
            label="预售证号"
            name="sale_status"
            style={{ width: '400px', marginLeft: '20px' }}
          >
            <Input placeholder="1#,2#已交房" />
          </Form.Item>
        </div>
        <div
          style={{
            display: 'flex',
            marginLeft: '50px',
            width: '1000px',
            height: '50px',
          }}
        >
          <Form.Item
            label="开发商"
            style={{ width: '400px' }}
            name="developer_name"
          >
            <Input placeholder="富力房产" />
          </Form.Item>
          <Form.Item
            label="地图坐标"
            name="lng"
            style={{ width: '400px', marginLeft: '0px' }}
          >
            <Input placeholder="115.345.1349" />
          </Form.Item>
          <Form.Item label="" style={{ width: '150px', marginLeft: '-90px' }}>
            <Button type="primary">标志位置</Button>
          </Form.Item>
        </div>
        <div
          style={{
            width: '1000px',
            display: 'flex',
            marginLeft: '-70px',
            flexDirection: 'column',
          }}
        >
          <Form.Item label="Switch" valuePropName="checked" name="status">
            <Switch />
          </Form.Item>
          <Form.Item label="Upload" valuePropName="fileList">
            <Upload
              name="avatar"
              listType="picture-card"
              className="avatar-uploader"
              showUploadList={false}
              action="http://fangadmin.shbwyz.com/house/ajaxuploadimg.html"
              beforeUpload={beforeUpload}
              onChange={handleChange}
            >
              <div>
                {imageUrl ? (
                  <img src={imageUrl} alt="avatar" style={{ width: '100%' }} />
                ) : (
                  uploadButton
                )}
              </div>
            </Upload>
          </Form.Item>
          <Form.Item label="楼盘介绍" name="introduce">
            <div
              style={{ border: '1px solid #ccc', zIndex: 100, width: '600px' }}
            >
              <Toolbar
                editor={editor}
                mode="default"
                style={{ borderBottom: '1px solid #ccc' }}
              />
              <Editor
                value={html}
                onCreated={setEditor}
                onChange={(editor) => setHtml(editor.getHtml())}
                mode="default"
                style={{ height: '300px', overflowY: 'hidden' }}
              />
            </div>
            <div style={{ marginTop: '15px' }}></div>
          </Form.Item>
          <Form.Item label="Button">
            <Button htmlType="submit">提交</Button>
          </Form.Item>
        </div>
      </Form>
    </div>
  );
}
const mapStateToProps = ({ kefu }: any) => {
  console.log(kefu);
  return kefu;
};
export default connect(mapStateToProps)(addHouse);
